<!-- 底部操作栏 -->
<template>
	<c-fixed-bottom height="110rpx" background-color="white">
		<view class="container">
			<view class="mini-btn-group">
				<button class="btn btn-transition-scale9" @click="handleNavToShop()">
					<text class="iconfont active">&#xe619;</text>
					<text class="label">店铺</text>
				</button>
				<button class="btn btn-transition-scale9" @click="handleNavToChat()">
					<text class="iconfont">&#xe61f;</text>
					<text class="label">客服</text>
				</button>
				<button class="btn btn-transition-scale9" @click="handleNavTo()">
					<text class="iconfont">&#xe60a;</text>
					<text class="label">购物车</text>
					<text class="count">3</text>
				</button>
			</view>
			<view class="large-btn-group">
				<button class="btn orange btn-transition-scale95" @click="handleChooseCombo()">加入购物车</button>
				<button class="btn red btn-transition-scale95" @click="handleNavToBuy()">立即购买</button>
			</view>
		</view>
	</c-fixed-bottom>
</template>

<script setup>
	import { useGoodsDetailStore } from '../store.js';

	// 去店铺
	const handleNavToShop = () => {
		uni.navigateTo({
			url: '/pagesC-shopping/shop/index'
		});
	}
	
	// 去聊天页面
	const handleNavToChat = () => {
		uni.navigateTo({
			url: '/pagesC-message/chat/index'
		});
	}

	// 去购物车
	const handleNavToCart = () => {
		uni.navigateTo({
			url: '/pagesC-shopping/shopping-cart/index'
		});
	}

	// 去购买
	const handleNavToBuy = () => {
		uni.navigateTo({
			url: '/pagesC-shopping/submit-order/index'
		});
	}

	// 选择规格
	const useGoodsDetail = useGoodsDetailStore();
	const handleChooseCombo = () => {
		if (useGoodsDetail.isShowComboPanel) {
			useGoodsDetail.HIDE_COMBO_PANEL();
			uni.showToast({
				icon: 'success',
				title: '加入成功'
			});
		} else {
			useGoodsDetail.SHOW_COMBO_PANEL();
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 110rpx;
		box-shadow: 0px -12rpx 40rpx 0px rgba(0, 0, 0, 0.02);

		.mini-btn-group {
			display: flex;
			align-items: center;
			padding-left: 32rpx;

			.btn {
				flex-shrink: 0;
				position: relative;
				display: flex;
				flex-direction: column;
				align-items: center;
				background-color: transparent;

				&+.btn {
					margin-left: 42rpx;
				}

				.iconfont {
					font-size: 42rpx;
					color: #222;

					&.active {
						color: #FE3333;
					}
				}

				.label {
					font-weight: 500;
					font-size: 22rpx;
					color: #222222;
				}

				.count {
					position: absolute;
					top: -4rpx;
					right: 0;
					display: block;
					min-width: 24rpx;
					height: 24rpx;
					font-weight: 500;
					font-size: 20rpx;
					color: #FFFFFF;
					line-height: 24rpx;
					text-align: center;
					padding: 0 4rpx;
					border-radius: 15rpx;
					background-color: #FE3333;
					box-sizing: border-box;
				}
			}
		}

		.large-btn-group {
			display: flex;
			align-items: center;

			.btn {
				width: 208rpx;
				height: 76rpx;
				font-weight: 500;
				font-size: 28rpx;
				color: #FFFFFF;
				text-align: center;
				line-height: 76rpx;
				border-radius: 38rpx;
				margin-right: 15rpx;

				&.orange {
					background: #FFA804;
				}

				&.red {
					background: #FE3333;
				}
			}
		}
	}
</style>